<template>
	<!-- <view class="layout"> -->
		<view class="bgDefault">
			<tn-nav-bar>我的佣金</tn-nav-bar>
			<view class="withdraw" :style="{paddingTop: vuex_custom_bar_height+18+ 'px'}">
				<!-- 明细 -->
				<view class="listBox">
					<scroll-view
					  class="list-scroll-content"
					  :scroll-y="true"
					  @scrolltolower="getMoreOrderList"
					>
						<view class="list">
							<view class="rows" v-for="(row,index) in log" :key='index'>
								<view class="row">
									<view class="rowTit">{{row.memo}}</view>
									<view class="price" v-if="row.type==1 || row.type==4">-{{row.money}}</view>
									<view class="price income" v-else>+{{row.money}}</view>
								</view>
								<view class="row">
									<view class="info">变更前：￥{{row.before}}</view>
									<view class="time">{{row.created_at|parseTime}}</view>
								</view>
								<view class="row">
									<view class="info">变更后：￥{{row.after}}</view>
									<view class="time"v-if="row.order_id">订单号：{{row.order_id}}</view>
								</view>
							</view>
							<view style="margin-top: 16px;">
								<tn-load-more v-if="log.length > 1"  :status="loadStatus" :fontSize="24" ></tn-load-more>
							</view>
							<view class="empty__item" v-if="log.length < 1 && !loading" style="margin-top: 200px;">
							  <tn-empty mode="list"></tn-empty>
							</view>
						</view>
					</scroll-view>
				</view>
		</view>
		<TemplateLoading :active="loading"></TemplateLoading>
	</view>
</template>

<script>
	import {moneyLog} from '@/api/user/index.js'
	import TemplateLoading from '../../components/loading.vue'
	export default {
		components:{TemplateLoading},
		data() {
			return {
				loading:false,
				loadStatus:"loadmore",
				log:[],
				amount:0.00,
				user:{},
				selectParam:{
					page:1,
					size:10,
					type:2
				},
				total:0
			};
		},
		
		onLoad() {
			this.initData()
		},
		methods: {
			getMoreOrderList(){
			  if(this.loadStatus == "nomore" || this.log.length == 0 ) return;
			  
			  this.selectParam.page++
			  
			  this.loadStatus="loading"
			  this.initData()
			},
			initData(){
			
				this.loading = true
				moneyLog(this.selectParam).then(res=>{
					this.loading = false
					this.log = [...this.log, ...res.data]
					this.total = res.total
					
					if(res.log.length < this.selectParam.size || this.log.length == this.total){
						this.loadStatus = "nomore"
					}else{
						this.loadStatus = "loadmore" 
					}
				},err=>{
					this.loading = false
				})
			},
			cashLink:function(e){
				uni.navigateTo({
					url:'/pages/user/withdraw/withdraw'
				})
			},
			recharge:function(e){
				uni.navigateTo({
					url:'/pages/user/recharge/recharge'
				})
			}
		},
	};
</script>

<style lang="scss">
	.bgDefault{
		background: $tn-main-bg;
		min-height: 100vh;
	}
	.empty{
		// position:fixed;
		// left: 0;
		// top:0;
		width: 100%;
		// height: 100vh;
		padding:150rpx 0;
		display:flex;
		justify-content: center;
		flex-direction: column;
		align-items:center;
		background: #fff;
		image{
			width: 240rpx;
			height: 160rpx;
			margin-bottom:30rpx;
		}
		.empty-tips{
			display:flex;
			font-size: 14px;
			color: #666;
			.navigator{
				color:  $tn-main-orange;
				margin-left: 16rpx;
			}
		}
	}
	// 总资产
	.priceBox{
		margin: 30rpx;background:linear-gradient(to right,#fa436a,#fa9943);
		padding:50rpx 40rpx 40rpx 40rpx;border-radius:20rpx;color:#fff;
		text-align: center;
		.tit{font-size: 30rpx;}
		.money{font-size:65rpx;font-weight: bold;margin-top:20rpx;}
		.btn{
			margin-top:40rpx;display: flex;justify-content: center;
			.cash,.recharge{border-radius: 50rpx;color:#fff;font-size: 26rpx;
			border: 2rpx solid #fff;width:160rpx;height:55rpx;line-height:55rpx;margin: 0 20rpx;}
		}
	}
	// 明细
	.listBox{
		margin: 0 30rpx;
		.tit{font-size:32rpx;border-left:6rpx solid $tn-main-orange;height:35rpx;line-height:35rpx;padding-left:10rpx;margin-bottom:30rpx;}
		.rows{
			background:#fff;margin-bottom: 20rpx;padding:25rpx;border-radius:10rpx;
			.row{
				display: flex;align-items: center;
				.rowTit,.info{flex: 1;}
				.rowTit,.price{font-size: 30rpx;font-weight: bold;}
				.price{color:#fa436a;font-size: 35rpx;}
				.info,.time{font-size:26rpx;color:#999;margin-top:10rpx;}
				.income{color:#19d538;}
			}
		}
	}
	
	.list-scroll-content {
		height: calc(100vh - (300rpx + env(safe-area-inset-bottom) / 2))
	}
</style>
